---
name: Button 按钮
route: /components/Button
menu: 通用
---

import CodeBox from '../../doc-comps/emil-box';

import TypeDemo from './demo/1-type-demo';
import TypeDemoCode from '!raw-loader!./demo/1-type-demo';

import IconDemo from './demo/2-icon-demo';
import IconDemoCode from '!raw-loader!./demo/2-icon-demo';

### Button 按钮

按钮用于开始一个即时操作。

#### 何时使用

标记了一个（或封装一组）操作命令，响应用户点击行为，触发相应的业务逻辑。


在 Emil UI 中我们提供了五种按钮。

- 主按钮：用于主行动点，一个操作区域只能有一个主按钮。
- 默认按钮：用于没有主次之分的一组行动点。
- 虚线按钮：常用于添加操作。
- 文本按钮：用于最次级的行动点。
- 链接按钮：一般用于链接，即导航至某位置。

以及四种状态属性与上面配合使用。

- 危险：删除/移动/修改权限等危险操作，一般需要二次确认。
- 幽灵：用于背景色比较复杂的地方，常用在首页/产品页等展示场景。
- 幽灵：用于背景色比较复杂的地方，常用在首页/产品页等展示场景。
- 加载中：用于异步操作等待反馈的时候，也可以避免多次提交。

#### 代码演示

##### 基本使用

<CodeBox
  code={TypeDemoCode}
  title="按钮类型"
  desc="按钮有五种类型：主按钮、次按钮、虚线按钮、文本按钮和链接按钮。主按钮在同一个操作区域最多出现一次。"
>
  <TypeDemo></TypeDemo>
</CodeBox>

<CodeBox
  code={IconDemoCode}
  title="图标按钮"
  desc="当需要在 Button 内嵌入 Icon 时，可以设置 icon 属性，或者直接在 Button 内使用 Icon 组件。如果想控制 Icon 具体的位置，只能直接使用 Icon 组件，而非 icon 属性。"
>
  <IconDemo />
</CodeBox>


#### API

| 属性 | 说明 | 类型 | 默认值 |
| ---- | ---- | ---- | ------ |
| block | 将按钮宽度调整为其父宽度的选项 | boolean | false |
| danger | 设置危险按钮 | boolean | false |
| disabled | 按钮失效状态 | boolean | false |
| ghost | 幽灵属性，使按钮背景透明 | boolean | false |
| href | 点击跳转的地址，指定此属性 button 的行为和 a 链接一致 | string | - |
| htmlType | 设置 button 原生的 type 值，可选值请参考 HTML 标准 | string | button |
| icon | 设置按钮的图标组件 | ReactNode | - |
| loading | 设置按钮载入状态 | boolean or { delay: number } | false |
| shape | 设置按钮形状 | default or circle or round | default |
| size | 设置按钮大小 | large or middle or small | middle |
| target | 相当于 a 链接的 target 属性，href 存在时生效 | string | - |
| type | 设置按钮类型 | primary or ghost or dashed or link or text or default | default |
| onClick | 点击按钮时的回调 | (event) => void | - |
